| 前端导出Excel（自定义样式、多级表头、普通导出） | 您所在的位置：网站首页 › 各种办公表格 复杂怎么做图片 › 前端导出Excel（自定义样式、多级表头、普通导出） |
前端导出Excel（自定义样式、多级表头、普通导出）
这里写自定义目录标题
预览背景使用插件exceljs下载exceljs设置导出表格数据代码实现
预览
背景
在做一个后台管理系统，需要做数据导出excel，于是采用了前端进行导出，前端可以根据配置字段进行数据生产excel，然后在浏览器进行下载。 使用插件exceljs经过多方对比，最终选择用exceljs来做导出excel的工具库，因为开发着非常活跃，在这里选用的是 exceljs,支持nodejs服务端和兼容大多数浏览器导出，读写支持完美，活跃度很高，使用简单。 下载exceljs npm install exceljs 设置导出表格数据假设我们需要导出一个这样的表格 data const data = [] for(let i=0;i date: '2016-05-02', name: '王五'+i, price: 1+i, province: '上海', admin:"admin", sex:i%2?1:0, checked:true, id:i+1, age:0, city: '普陀区', address: '上海市普上海', zip: 200333 }) }column const column = [ { name: 'id', label: 'id', }, { name: 'name', label: '姓名',}, { name: 'age', label: '年龄',}, { name: 'sex', label: '性别',}, { name: 'price', label: '价格', }, { name: 'admin', label: '账号'}, { name: 'address', label: '地址', }, { name: 'date', label: '日期',}, { name: 'province', label: '省份' }, { name: 'city', label: '城市' }, { name: 'zip', label: '邮编' }, ]methods const exportExcelAction = ()=>{ exportExcel({ column, data, filename:input.value||'导出 excel', format:format.value, autoWidth:true }) } 代码实现 const ExcelJS = require("exceljs"); // 创建excel const workbook = new ExcelJS.Workbook(); // 设置信息 workbook.creator = "Me"; workbook.title = filename; workbook.created = new Date(); workbook.modified = new Date(); // 创建工作表 const worksheet = workbook.addWorksheet(filename); // 设置列名 let columnsName = []; column.forEach((item,index)=>{ let obj = { header: item.label, key:item.name, width: null } if(autoWidth){ let maxArr = [autoWidthAction(item.label)] data.forEach(ite=>{ let str = ite[item.name] ||'' if(str){ maxArr.push(autoWidthAction(str)) } }) obj.width = Math.max(...maxArr)+5 } // 设置列名、键和宽度 columnsName.push(obj); }) worksheet.columns = columnsName; // 添加行 worksheet.addRows(data); // 写入文件 const uint8Array = format === "xlsx" ? await workbook.xlsx.writeBuffer() : await workbook.csv.writeBuffer(); const blob = new Blob([uint8Array], { type: "application/octet-binary" }); if (window.navigator.msSaveOrOpenBlob) { // msSaveOrOpenBlob方法返回boolean值 navigator.msSaveBlob(blob, filename + `.${format}`); // 本地保存 } else { const link = document.createElement("a"); // a标签下载 link.href = window.URL.createObjectURL(blob); // href属性指定下载链接 link.download = filename + `.${format}`; // dowload属性指定文件名 link.click(); // click()事件触发下载 window.URL.revokeObjectURL(link.href); // 释放内存 }在线预览展示 感兴趣的话可以给个star–》github源码地址 |
数据【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |